<template>
  <div class="hello">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.8f4cea4b5b89a66d8f0b6157e920dd1b?rik=gE7%2br5HA4Y8xSQ&riu=http%3a%2f%2fdmimg.5054399.com%2fallimg%2foptuji%2fnvdi%2f9.jpg&ehk=%2buu1GJHsQbryBtSYXAVRrM2bYW7g81R5cYi64GOc3OU%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="https://so1.360tres.com/t012017830e4abeec1d.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.2ltZvf8METIo-gLnEb8c-QHaEo?rs=1&pid=ImgDetMain" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
};
</script>
<style scoped>
img{
  width: 100%;
  height: 200px;
}
</style>